<template>
  <div class="index_con">
    <!-- 顶部搜搜栏 -->
    <van-nav-bar class="page-navbar" fixed>
      <van-button class="search_btn" slot="title" round icon="search">搜索</van-button>
    </van-nav-bar>
    <!-- tab切换栏 -->
    <van-tabs v-model="active" class="tabss" animated swipeable>
      <van-tab :title="item.name" v-for="item in UserChannelList" :key="item.id">
        <articles :articleChannel="item"></articles>
      </van-tab>
      <!-- zhan是占位元素因为更多按钮是固定布局 -->
      <div slot="nav-right" class="zhan"></div>
      <div slot="nav-right" class="more_btn" @click="isShow = true">
        <i class="iconfont myIcon-gengduo"></i>
      </div>
    </van-tabs>

    <!-- 频道列表弹出层 -->
    <van-popup
      v-model="isShow"
      closeable
      close-icon-position="top-left"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <pindaoEdit :pindaoList="UserChannelList" @editToJupm="EditToJupm" :active="active"></pindaoEdit>
    </van-popup>
  </div>
</template>

<script>
// 导入获取用户频道列表方法
import { getUserChannelListAPI } from '@/api/user.js'
// 导入文章列表组件
import articles from '@/components/articleList.vue'
// 导入编辑频道子组件
import pindaoEdit from '@/components/pindaoEdit.vue'
export default {
  data() {
    return {
      active: 0,
      // 用户频道列表数据数组
      UserChannelList: [],
      // 频道列表是否显示变量
      isShow: false
    }
  },
  methods: {
    // 获取当前登录用户频道列表方法
    async getUserChannelList() {
      try {
        const { data } = await getUserChannelListAPI()
        console.log(data)
        this.UserChannelList = data.data.channels
      } catch (error) {
        console.log(error)
      }
    },
    // 跳转页面
    EditToJupm(inx, popupIsShow = true) {
      this.active = inx
      this.isShow = popupIsShow
    }
  },
  created() {
    this.getUserChannelList()
  },
  components: {
    articles,
    pindaoEdit
  }
}
</script>

<style scoped lang="less">
.index_con {
  // scoped属性作用域的样式会给标签元素生成自定义属性名,保证样式只针对于当前组件元素,如果想给子元素
  // 保证相同类名的组件之间的样式相互之间不会相互影响
  // 也设置样式就需要加deep深度样式
  padding-bottom: 100px;
  padding-top: 100px;
  /deep/.van-nav-bar__title {
    max-width: 100%;
  }

  // .van-tabs--line {
  //   position: fixed;
  //   top: 100px;
  //   z-index: 1;
  // }

  .page-navbar {
    .search_btn {
      width: 555px;
      height: 64px;
      background-color: #5babfb;
      border: 0;
      font-size: 28px;
      color: #ffffff;
      .van-icon {
        font-size: 40px;
        color: #ffffff;
      }
    }
  }

  /deep/.tabss {
    .van-tab {
      border-right: 1px solid #cccccc;
      min-width: 200px;
    }
    .van-tabs__line {
      background-color: #0094ff;
    }

    .more_btn {
      width: 66px;
      height: 82px;
      position: fixed;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ffffff;
      opacity: 0.9;
      i {
        font-size: 33px;
      }
    }

    .zhan {
      width: 66px;
      height: 82px;
      flex-shrink: 0;
    }
  }
}
</style>
